<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 超市系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/order.css">
    <link rel="stylesheet" href="styles/modal.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="js/vue.js"></script>
    <link rel="icon" href="/photo/Profile picture/log.ico" type="image/x-icon">
</head>

<body>
    <div>
        <header id="header">
            <nav>
                <div class="logo-container">
                    <img src="/photo/Profile picture/logo.png" alt="超市Logo" class="logo">
                    <div class="brand-name">超级<span>市场</span></div>
                </div>
                <ul class="nav-links">
                    <li><a href="index-ai.html"><i class="fas fa-home"></i> 首页</a></li>
                    <li><a href="order.html"><i class="fas fa-shopping-bag"></i> 我的订单</a></li>
                    <li><a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
                    <li class="user-info">
                        <div class="user-avatar-container">
                            <div class="user-avatar">
                                <img id="userAvatar" :src="userAvatarUrl" alt="用户头像">
                            </div>
                            <span id="username" class="user-name" style="color: black;">{{username}}</span>
                            <div class="avatar-dropdown">
                                <a href="/profile.html" target="_blank" id="profileBtn" class="dropdown-item">
                                    <i class="fas fa-user"></i> 个人信息
                                </a>
                                <a href="/login.html" id="logoutBtn" class="dropdown-item">
                                    <i class="fas fa-sign-out-alt"></i> 退出
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>
        </header>

        <main id="app">
            <div class="order-container">
                <h2>我的订单</h2>
                <div class="order-tools">
                    <div class="search-box">
                        <input type="text" v-model="searchTerm" @keyup.enter="searchOrders" placeholder="搜索订单号或商品">
                        <i class="fas fa-search" @click="searchOrders"></i>
                    </div>
                    <div class="date-filter">
                        <input type="date" v-model="startDate" id="startDate">
                        <span>至</span>
                        <input type="date" v-model="endDate" id="endDate">
                        <button @click="filterByDate" class="filter-btn">筛选</button>
                    </div>
                </div>
                <div class="order-tabs">
                    <button :class="['tab-btn', { 'active': filterStatus === ''}]"
                        @click="filterByStatus('')">所有订单</button>
                    <button :class="['tab-btn', { 'active': filterStatus === 0 }]" @click="filterByStatus(0)"
                        data-status="0">未支付</button>
                    <button :class="['tab-btn', { 'active': filterStatus === 1 }]" @click="filterByStatus(1)"
                        data-status="1">已支付</button>
                    <button :class="['tab-btn', { 'active': filterStatus === 2 }]" @click="filterByStatus(2)"
                        data-status="2">已取消</button>
                    <button :class="['tab-btn', { 'active': filterStatus === 3 }]" @click="filterByStatus(3)"
                        data-status="3">已完成</button>
                </div>
                <!-- 订单列表 -->
                <div id="orderList" class="order-list">
                    <!-- 订单将通过JavaScript动态加载 -->
                    <div class="order-item" v-for="order in orders" :key="order.orderId">
                        <div class="order-header">
                            <div class="order-meta">
                                <span class="order-id">订单号: {{ order.orderId }}</span>
                                <span class="order-date">{{ order.createTime }}</span>
                            </div>
                            <span v-if="order.status === 0 && order.countdown > 0" class="countdown-timer">
                                支付剩余时间: {{ formatCountdown(order.countdown) }}
                            </span>
                            <span v-else-if="order.status === 0 && order.countdown <= 0" class="countdown-expired">
                                订单已超时
                            </span>
                            <span v-else-if="order.status === 2" class="order-status-cancelled">
                                订单已取消
                            </span>
                        </div>
                        <div class="order-items">
                            <div class="order-item-row" v-for="item in order.items" :key="item.productId">
                                <img :src="item.imageUrl" class="item-image" :alt="item.name">
                                <div class="item-details">
                                    <div class="item-info">
                                        <span class="item-name">{{ item.commodityName }}</span>
                                        <span class="item-quantity">数量: {{ item.commodityNum }}</span>
                                    </div>
                                    <span class="item-price">¥{{ item.commoditySalePrice }}</span>
                                </div>
                                <button v-if="order.status === 3" class="order-btn add-review-btn"
                                    @click="addReview(order.orderId, item.commodityId)">去评价</button>
                            </div>
                        </div>
                        <div class="order-total">
                            总计: ¥{{ order.totalAmount }}
                        </div>
                        <div class="order-actions">
                            <button v-if="order.status === 0 && order.countdown > 0" class="order-btn cancel-btn"
                                @click="cancelOrder(order.orderId)">取消订单</button>
                            <button v-if="order.status === 0 && order.countdown > 0" class="order-btn pay-btn"
                                @click="goToPayment(order.orderId)">去支付</button>
                            <button v-if="order.status === 1" class="order-btn receive-btn"
                                @click="confirmReceipt(order.orderId)">确认收货</button>
                            <button v-if="order.status === 3 || order.status === 1 " class="order-btn view-details-btn"
                                @click="viewOrderDetails(order.orderId)">查看详情</button>
                            <button v-if="order.status === 0 || order.status === 3" class="order-btn delete-btn"
                                @click="deleteOrder(order.orderId)">删除订单</button>
                        </div>
                    </div>
                    <div v-if="orders.length === 0" class="no-orders-message">
                        <p>暂无订单</p>
                    </div>
                </div>
                <div class="order-pagination">
                    <button @click="prevPage" class="page-btn" :disabled="currentPage === 1">上一页</button>
                    <span>第 {{ currentPage }} / {{ totalPages }} 页</span>
                    <button @click="nextPage" class="page-btn" :disabled="currentPage === totalPages">下一页</button>
                </div>
            </div>

            <!-- 支付模态框 -->
            <div id="alipay-container" v-html="alipayForm"></div>
        </main>

    </div>

</body>

<script src="js/order.js"></script>
<script src="js/header.js"></script>

</html>